<template>
  <div>
    <div v-if="showbutton"> <el-button @click="submit()"> 填报</el-button></div>
    <table style="width: 100%" border="1" cellspacing="1">
      <tbody>
        <tr>
          <td colspan="1">学校名称</td>
          <td colspan="8"><input type="text" v-model="dataform.orgName" /></td>
        </tr>
        <tr>
          <td colspan="1">法人代表</td>
          <td colspan="4"><input type="text" v-model="dataform.legalPerson" /></td>
          <td colspan="2">固定电话</td>
          <td colspan="2"><input type="text" v-model="dataform.staticPhone" /></td>
        </tr>
        <tr>
          <td colspan="1">向公众开放起始年份</td>
          <td colspan="4"><input type="text" v-model="dataform.startTime" /></td>
          <td colspan="2">场馆总面积(㎡)</td>
          <td colspan="2"><input type="text" v-model="dataform.acreage" /></td>
        </tr>
        <tr>
          <td colspan="1" :rowspan="dataform.fSheet7bList.length">向公众开放的场馆</td>
          <el-tooltip content="右键可以新增和删除一行" placement="top" effect="light" :open-delay="500">
            <td colspan="4" @contextmenu.prevent="showContextMenu($event, 0)" class="venue-cell">场馆名称/面积(㎡)</td>
          </el-tooltip>
          <td colspan="2"><input type="text" v-model="dataform.fSheet7bList[0].placeName" /></td>
          <td colspan="2"><input type="text" v-model="dataform.fSheet7bList[0].acreage" /></td>
        </tr>
        <tr v-for="(item, index) in dataform.fSheet7bList.slice(1)" :key="index">
          <el-tooltip content="右键可以新增和删除一行" placement="top" effect="light" :open-delay="500">
            <td colspan="4" @contextmenu.prevent="showContextMenu($event, index + 1)" class="venue-cell">场馆名称/面积(㎡)</td>
          </el-tooltip>
          <td colspan="2"><input type="text" v-model="dataform.fSheet7bList[index + 1].placeName" /></td>
          <td colspan="2"><input type="text" v-model="dataform.fSheet7bList[index + 1].acreage" /></td>
        </tr>
        <tr>
          <td colspan="1" rowspan="2">开放类型(划"√")</td>
          <td colspan="4">每天开放</td>
          <td colspan="4"><input type="text" v-model="opentype.everyday" /></td>
        </tr>
        <tr>
          <td colspan="4">节假日开放</td>
          <td colspan="4"><input type="text" v-model="opentype.HolidaysAndFestivals" /></td>
        </tr>
        <tr>
          <td colspan="1">日均开放时长(小时)</td>
          <td colspan="8"><input type="text" v-model="dataform.dayTimeNum" /></td>
        </tr>
        <tr>
          <td colspan="1" rowspan="5">经费投入</td>
          <td colspan="4">累计投入(万元)</td>
          <td colspan="4"><input type="text" v-model="dataform.allPutMoney" /></td>
        </tr>
        <tr>
          <td colspan="4" rowspan="4">上一年度投入经费(万元)</td>
          <td colspan="2">本省市财政补贴</td>
          <td colspan="2"><input type="text" v-model="dataform.provinceMoney" /></td>
        </tr>
        <tr>
          <td colspan="2">学校自筹</td>
          <td colspan="2"><input type="text" v-model="dataform.schoolMoney" /></td>
        </tr>
        <tr>
          <td colspan="2">其他</td>
          <td colspan="2"><input type="text" v-model="dataform.otherMoney" /></td>
        </tr>
        <tr>
          <td colspan="2">合计</td>
          <td colspan="2"><input type="text" v-model="dataform.totalMoney" /></td>
        </tr>
        <tr>
          <td colspan="1" rowspan="4">购买保险情况(划“√”)</td>
          <td colspan="4" rowspan="3">已购买</td>
          <td colspan="3">公共责任险</td>
          <td colspan="1"><input type="text" v-model="insurance.PublicResponsibility" /></td>
        </tr>
        <tr>
          <td colspan="3">人身意外伤害险</td>
          <td colspan="1"><input type="text" v-model="insurance.AccidentOfLife" /></td>
        </tr>
        <tr>
          <td colspan="3">其他险种</td>
          <td colspan="1"><input type="text" v-model="insurance.other" /></td>
        </tr>
        <tr>
          <td colspan="4">没有购买</td>
          <td colspan="4"><input type="text" v-model="insurance.NoPurchase" /></td>

        </tr>
      </tbody>
    </table>
    <div style="display: flex; justify-content: space-between;">
      <div>填表人：<input type="text" v-model="dataform.writePeople" /></div>
      <div>联系电话：<input type="text" v-model="dataform.writePhone" /></div>
    </div>
    <div style="display: flex; justify-content: space-between;">
      <div>填报时间：<input type="text" v-model="dataform.writeTime" /></div>
      <div>填报单位：<input type="text" v-model="dataform.orgName" /></div>
    </div>
    <div v-if="contextMenuVisible" :style="contextMenuStyle" class="context-menu">
      <div @click="addRow" class="menu-item">新增行</div>
      <div @click="deleteRow" class="menu-item">删除行</div>
    </div>
  </div>
</template>

<script>
  import qs from 'qs'
  import {
    insert_update_sheet7
  } from '@/api/statistics.js'
  export default {
    props: {
      Alldata: {
        type: Object,
        default: {}
      },
    },
    data() {
      return {
        showbutton: true,
        dataform: {
          orgName: '',
          legalPerson: '',
          staticPhone: '',
          startTime: '',
          acreage: '',
          openType: "", //1每天开放，2节假日开放
          dayTimeNum: '',
          allPutMoney: '',
          provinceMoney: '',
          schoolMoney: '',
          otherMoney: '',
          totalMoney: '',
          insuranceStatus: '',
          writePeople: '',
          writeTime: '',
          writePhone: '',
          fSheet7bList: [{
              placeName: '',
              acreage: ''
            },
            {
              placeName: '',
              acreage: ''
            },
            {
              placeName: '',
              acreage: ''
            },
            {
              placeName: '',
              acreage: ''
            },
            {
              placeName: '',
              acreage: ''
            },
            {
              placeName: '',
              acreage: ''
            },
            {
              placeName: '',
              acreage: ''
            },
            {
              placeName: '',
              acreage: ''
            }
          ]
        },
        //1公共责任险 2人生意外险 3 其他险种 4没有购买 insuranceStatus
        insurance: {
          PublicResponsibility: "",
          AccidentOfLife: "",
          other: "",
          NoPurchase: "",
        },

        opentype: {
          everyday: "",
          HolidaysAndFestivals: "",
        },
        contextMenuVisible: false,
        contextMenuStyle: {
          left: '0px',
          top: '0px'
        },
        currentRowIndex: -1
      };
    },

    //更新数据
    watch: {
      Alldata(newValue, oldValue) {

        this.dataform = newValue
        if (this.dataform.openType == 1) {
          this.opentype.everyday = "√"
        } else if (this.dataform.openType == 2) {
          this.opentype.HolidaysAndFestivals = "√"
        }

        if (this.dataform.insuranceStatus == '1') {
          this.insurance.PublicResponsibility = "√"
        } else if (this.dataform.insuranceStatus == '2') {
          this.insurance.AccidentOfLife = "√"
        } else if (this.dataform.insuranceStatus == '3') {
          this.insurance.other = "√"
        } else if (this.dataform.insuranceStatus == '4') {
          this.insurance.NoPurchase = "√"
        }

      },



    },



    methods: {

      showbuut() {
        this.showbutton = false
      },


      submit() {
        if (this.opentype.everyday) {
          this.dataform.openType = 1
        } else if (this.opentype.HolidaysAndFestivals) {
          this.dataform.openType = 2
        }

        if (this.insurance.PublicResponsibility) {
          this.dataform.insuranceStatus = 1
        } else if (this.insurance.AccidentOfLife) {
          this.dataform.insuranceStatus = 2
        } else if (this.insurance.other) {
          this.dataform.insuranceStatus = 3
        } else if (this.insurance.NoPurchase) {
          this.dataform.insuranceStatus = 4
        }



        // console.log(qs.stringify(this.dataform));
        insert_update_sheet7(this.dataform).then(res => {
          this.$message.success('填报成功')
        })
      },

      showContextMenu(event, index) {
        event.preventDefault()
        this.contextMenuVisible = true
        this.contextMenuStyle.left = event.clientX + 'px'
        this.contextMenuStyle.top = event.clientY + 'px'
        this.currentRowIndex = index
      },

      addRow() {
        const newRow = {
          placeName: '',
          acreage: ''
        }
        this.dataform.fSheet7bList.splice(this.currentRowIndex + 1, 0, newRow)
        this.contextMenuVisible = false

        this.$nextTick(() => {
          this.$forceUpdate()
        })
      },

      deleteRow() {
        if (this.dataform.fSheet7bList.length <= 1) {
          this.$message({
            message: '至少保留一个场馆',
            type: 'warning'
          })
          return
        }
        this.dataform.fSheet7bList.splice(this.currentRowIndex, 1)
        this.contextMenuVisible = false

        // 强制更��视图
        this.$nextTick(() => {
          this.$forceUpdate()
        })
      }





    },

    mounted() {
      // 点击其他地方关闭右键菜单
      document.addEventListener('click', (e) => {
        if (!e.target.closest('.context-menu')) {
          this.contextMenuVisible = false
        }
      })
    },

    beforeDestroy() {
      // 清理事件监听
      document.removeEventListener('click', this.closeContextMenu)
    }
  }
</script>

<style>
  table {
    border-collapse: collapse;
    /* //合并为一个单一的边框 */
    border-color: #a2a7ab;
    /* //边框颜色按实际自定义即可 */
    margin-bottom: 10px;
  }

  thead tr th {
    background-color: #f8f8f9;
    /* //设置表格标题背景色 */
    padding: 3px;
    text-align: center;
  }

  tbody tr td {
    padding: 3px;
    text-align: center;
    height: 34px;
    /* //设置单元格最小高度 */
  }

  .context-menu {
    position: fixed;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 0;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
  }

  .menu-item {
    padding: 5px 15px;
    cursor: pointer;
  }

  .menu-item:hover {
    background-color: #f5f5f5;
  }

  .venue-cell {
    cursor: context-menu;
    /* 添加右键菜单的鼠标样式提示 */
  }
</style>
